<template>
  <div>
    <el-card :bordered="false" shadow="never" class="ivu-mt">
      <div class="top-box">
        <el-button type="primary" class="bnt" @click="addArticle">添加医生信息</el-button>
        <div class="carouse">
          <span>状态：</span>
          <el-select v-model="doctorTypeValue" placeholder="请选择" @change="carouseChange">
            <el-option
              v-for="item in doctorTypeList"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <el-table
        :data="cmsList"
        ref="table"
        class="mt14"
        v-loading="loading"
        highlight-current-row
        no-userFrom-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
      >
        <el-table-column label="ID" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="科室" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.cate_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="头像" min-width="60">
          <template slot-scope="scope">
            <div v-if="scope.row.avatar" v-viewer>
              <div class="tabBox_img">
                <img v-lazy="scope.row.avatar" />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="医生姓名" min-width="60">
          <template slot-scope="scope">
            <span class="line2">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="医生简介" min-width="150">
          <template slot-scope="scope">
            <span class="line2">{{ scope.row.profile }}</span>
          </template>
        </el-table-column>
        <el-table-column label="特长" min-width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.specialty }}</span>
          </template>
        </el-table-column>
        <el-table-column label="荣誉" min-width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.contribution }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="60">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1">已上架</span>
            <span v-if="scope.row.status === 0">未上架</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" min-width="110">
          <template slot-scope="scope">
            <span>{{ scope.row.add_time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="170">
          <template slot-scope="scope">
            <a @click="edit(scope.row)">编辑</a>
            <el-divider direction="vertical"></el-divider>
            <a @click="artRelation(scope.row)">关联</a>
            <el-divider direction="vertical"></el-divider>
            <a @click="del(scope.row, '删除医生信息', scope.$index)">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <pagination
          v-if="total"
          :total="total"
          :page.sync="artFrom.page"
          :limit.sync="artFrom.limit"
          @pagination="getList"
        />
      </div>
    </el-card>
    <div class="adddistribution-box" v-if="addclassification">
      <div class="title-box">
        <div class="header">
          <div class="left-text">{{ popupTitle }}</div>
          <div class="right-icon"><i class="el-icon-close" style="font-size: 23px;color: #999;" @click="cancelK"></i>
          </div>
        </div>
        <div class="center-box">
          <el-form :model="classificationList" :rules="rules" ref="classificationList" label-width="100px"
                   class="demo-dynamic">
            <el-form-item prop="cate_id" label="医生科室:" style="margin-top: 20px">
              <el-select v-model="classificationList.cate_id" placeholder="请选择" @change="typeChange">
                <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="name" label="医生姓名:" style="margin-top: 20px">
              <el-input v-model="classificationList.name" style="width: 90%" placeholder="请输入服务名称"></el-input>
            </el-form-item>
            <el-form-item prop="profile" label="医生简介:" style="margin-top: 20px">
              <el-input
                type="textarea" style="width: 90%" :rows="2" placeholder="请输入医生简介"
                v-model="classificationList.profile"></el-input>
            </el-form-item>
            <el-form-item prop="content" label="医生详情:" style="margin-top: 20px">
              <el-input
                type="textarea" style="width: 90%" :rows="2" placeholder="请输入医生详情"
                v-model="classificationList.content"></el-input>
            </el-form-item>
            <el-form-item prop="specialty" label="医生特长:" style="margin-top: 20px">
              <el-input v-model="classificationList.specialty" style="width: 90%" placeholder="请输入医生特长"></el-input>
            </el-form-item>
            <el-form-item prop="contribution" label="医生荣誉:" style="margin-top: 20px">
              <el-input v-model="classificationList.contribution" style="width: 90%" placeholder="请输入医生荣誉"></el-input>
            </el-form-item>
            <el-form-item prop="sort" label="排序:" style="margin-top: 20px">
              <el-input v-model="classificationList.sort" style="width: 90%" placeholder="请输入医生排序"></el-input>
            </el-form-item>

            <el-form-item label="状态：">
              <el-radio-group v-model="classificationList.status" class="form-sty">
                <el-radio :label="1">已上架</el-radio>
                <el-radio :label="0">未上架</el-radio>
              </el-radio-group>
            </el-form-item>
              <el-form-item prop="avatar" class="form" label="医生头像：">
                <div class="picBox" @click="modalPicTap('单选')">
                  <div class="pictrue" v-if="classificationList.avatar">
                    <img :src="classificationList.avatar" />
                  </div>
                  <div v-else class="upLoad acea-row row-center-wrapper">
                    <i class="el-icon-plus" style="font-size: 24px"></i>
                  </div>
                </div>
                <div class="tip">只能上传一张图片</div>
              </el-form-item>

          </el-form>
          <div class="button-box">
            <button class="cancel" @click="cancelK">取消</button>
            <button class="determine" v-if="modifyT" @click="determinadd">确定</button>
            <button class="determine" v-else @click="determinadd">修改</button>
          </div>
        </div>
        <el-dialog z-index="20" :visible.sync="modalPic" width="950px" title="上传医生头像" :close-on-click-modal="false">
          <uploadPictures
            :isChoice="isChoice"
            @getPic="getPic"
            :gridBtn="gridBtn"
            :gridPic="gridPic"
            v-if="modalPic"
          ></uploadPictures>
        </el-dialog>
      </div>
    </div>
    <!--关联-->
    <el-dialog :visible.sync="modals" title="已关联服务" class="paymentFooter" width="1000px" @closed="cancel">
      <goods-list ref="goodslist" :Id="serviceId" :type="1" @closePop="cancel" @getProductId="getProductId" ></goods-list>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { doctorListApi,doctorAddApi, doctorTypeListApi,doctorDelApi } from "@api/service_information";
import { formatDate } from "@/utils/validate";
import uploadPictures from "@/components/uploadPictures";
import goodsList from "@/components/goodsList/serviceAssociation.vue";
import { relationApi } from "@api/cms";

export default {
  name: "cms_article",
  components: {
    uploadPictures,
    goodsList
  },
  data() {
    return {
      modalTitleSs: "",
      loading: false,
      artFrom: {
        page: 1,
        limit: 20,
        status:'',
      },
      total: 0,
      addclassification: false,
      serviceId: null,
      modalPic: false,
      doctorTypeValue:'',  //  选择状态
      doctorTypeList:[
        {id:"",label:"全部"},
        {id:1,label:"已上架"},
        {id:0,label:"未上架"},
      ],
      modifyT: true,
      images: [],
      popupTitle: "添加服务",
      typeList: [], // 分类列表
      typeDepartments:'', //  科室
      classificationList: {
        id: "",
        name: "",  //  医生姓名
        cate_id: '', // 科室id
        cate_name: "", // 科室名称
        avatar: "", // 头像
        profile: "", // 简介
        content: "", // 详情
        contribution: "", //  荣誉
        specialty: "", //  特长
        add_time: "", // 时间
        sort: 0, // 排序
        status: 1,//  是否上架
      },
      isChoice: "",
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12
      },
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8
      },
      cmsList: [],
      treeData: [],
      list: [],
      cid: 0, // 移动分类id
      cmsId: 0,
      formValidate: {
        type: 1
      },
      rows: {},
      modal_loading: false,
      modals: false,
      props: {
        value: "id",
        label: "title",
        emitPath: false
      },
      rules: {
        cate_id: [
          { required: true, message: "请选择医生类型", trigger: "blur" },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入医生姓名", trigger: "blur" },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
        ],
        profile: [
          { required: true, message: "医生简介", trigger: "blur" }
          // { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
        ],
        content: [
          { required: true, message: "医生详情", trigger: "blur" }
          // { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
        ],
        specialty: [
          { required: true, message: "医生特长", trigger: "blur" },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
        ],
        contribution: [
          { required: true, message: "医生荣誉", trigger: "blur" },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
        ],
        avatar: [
          { required: true, message: "请选择医生头像", trigger: "blur" },
        ],

      }
    };
  },
  computed: {
    ...mapState("media", ["isMobile"]),
    labelWidth() {
      return this.isMobile ? undefined : "80px";
    },
    labelPosition() {
      return this.isMobile ? "top" : "right";
    }
  },
  filters: {
    formatDate(time) {
      if (time !== 0) {
        let date = new Date(time * 1000);
        return formatDate(date, "yyyy-MM-dd hh:mm");
      }
    }
  },
  created() {
    this.getCategoryList();

  },
  activated() {
    this.getList();
  },
  methods: {
    cancel() {
      this.modals = false;
    },

    // 关联成功
    getProductId(row) {
      let data = {
        product_id: row.id
      };
      relationApi(data, this.rows.id)
        .then(async (res) => {
          this.$message.success(res.msg);
          row.id = 0;
          this.modal_loading = false;
          this.modals = false;
          setTimeout(() => {
            this.getList();
          }, 500);
        })
        .catch((res) => {
          this.modal_loading = false;
          this.loading = false;
          this.$message.error(res.msg);
        });
    },

    // 医生信息列表
    getList(){
      this.loading = true;
      // console.log(this.typeList, "获取医生类型列表");
      doctorListApi(this.artFrom)
        .then(async (res) => {
          let data = res.data;
          this.cmsList = data.list;
          this.total = data.count;
          this.loading = false;
          this.cmsList.forEach(item => {
            const doctorType=this.typeList.find(item1=>item1.id===item.cate_id)
            if(doctorType){
              item.cate_name=doctorType.title
            }
          })
          // console.log(this.cmsList,'医生信息列表医生信息列表医生信息列表');
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error(res.msg);
        });

    },

    //  获取医生类型列表
    getCategoryList() {
      doctorTypeListApi({ page: 1, limit: 100 }).then(res => {
        console.log(res.data.list, "医生类型列表");
        this.typeList = res.data.list;
      });
    },
    // 下拉树
    handleCheckChange(data) {
      // this.artFrom.pid = data ? data : 0;
      this.artFrom.page = 1;
      this.getList();
    },
    // 编辑
    edit(row) {
      this.modifyT = false;
      this.classificationList = JSON.parse(JSON.stringify(row));
      this.addclassification = true;
      this.popupTitle = "修改医生信息";
    },
    // 关联
    artRelation(row) {
      this.serviceId=row.id;
      // console.log(row, "关联关联关联关联关联");
      this.modals = true;
    },
    // 删除
    del(row) {
      // console.log(row, "删除删除删除删除删除");
      doctorDelApi(row.id).then(res => {
        this.$message.success(res.msg);
        this.getList();
      });
    },
    // 选择图片
    modalPicTap(type) {
      this.isChoice = type;
      this.modalPic = true;
    },
    // 选中单张图片
    getPic(pc) {
        this.classificationList.avatar = pc.att_dir;
      this.modalPic = false;
    },
    // 打开添加医生信息弹窗
    addArticle () {
      this.getCategoryList()
      this.addclassification = true;
      this.classificationList.cate_id=''
      this.modifyT = true;
      this.popupTitle = "添加医生信息";
    },
    // 医生信息取消事件
    cancelK() {
      Object.keys(this.classificationList).forEach(key => {
        this.classificationList[key] = "";
      });
      // this.classificationList.cate_id=''
      this.classificationList.status = 1;
      this.classificationList.sort = 0;
      this.addclassification = false;
    },

    // 医生添加事件or修改事件
    determinadd() {
      if (this.classificationList.cate_id === '') return this.$message.error("请选择分类");
      if (this.classificationList.name === "") return this.$message.error("请输入医生姓名");
      if (this.classificationList.profile === "") return this.$message.error("请输入医生简介");
      if (this.classificationList.content === "") return this.$message.error("请输入医生详情");
      if (this.classificationList.specialty === "") return this.$message.error("请输入医生特长");
      if (this.classificationList.contribution === "") return this.$message.error("请输入医生荣誉");
      if (this.classificationList.avatar === "") return this.$message.error("请上医生头像");
      doctorAddApi(this.classificationList).then(res => {
        if (res.status === 200) {
          this.$message.success(res.msg);
          this.getList();
          Object.keys(this.classificationList).forEach(key => {
            this.classificationList[key] = "";
          });
          this.classificationList.status = 1;
          this.classificationList.sort = 0;
          this.$router.go(0); // 重新加载当前路由

        } else {
          this.$message.error(res.msg);
        }
      });
      this.addclassification = false;
    },
    //  科室选择
    typeChange(e){
      this.classificationList.cate_id=e
      console.log(e, "科室选择科室选择科室选择",this.classificationList.cate_id);
    },
    //  选择状态
    carouseChange(){
      this.artFrom.page = 1;
      this.artFrom.status = this.doctorTypeValue;
      this.getList()
    },

    // 表格搜索
    userSearchs() {
      this.artFrom.page = 1;
      this.getList();
    }
  }
};
</script>

<style scoped lang="stylus">
.treeSel ::v-deep .ivu-select-dropdown-list {
  padding: 0 10px !important;
  box-sizing: border-box;
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

.adddistribution-box {
  width: 100%;
  height: 100%;
  //min-height: 100vh;
  //position: absolute;
  //top: 0;
  //left: 0;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, .2);
  z-index: 30;

  .title-box {
    box-sizing: border-box;
    width: 35%;

    background: #fff;
    border-radius: 10px;
    padding-bottom: 10px;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid #e8eaec;

      .left-text {
        font-size: 14px;
      }
    }
  }


  .picBox {
    //width: 100%;
    //display: inline-block;
    //cursor: pointer;
    //border: 1px solid red;
  }

  .form .pictrue {
    width: 60px;
    height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 10px;
    position: relative;

    .btndel {
      position: absolute;
      z-index: 1;
      width: 20px !important;
      height: 20px !important;
      left: 45px;
      top: 1px;
    }
  }

  .form .upLoad {
    width: 60px;
    height: 60px;
    line-height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.02);
  }

  .form .pictrue img {
    width: 60px;
    height: 60px;
  }

  .button-box {
    width: 100%;
    text-align: end;
    padding-bottom: 10px;

    button {
      padding: 6px 13px;
      margin-right: 15px;
      border-radius: 5px;
      border: 1px solid rgba(0, 0, 0, .1);
      font-size: 13px;
    }

    .determine {
      background: #0256ff;
      color: #fff;
    }
  }

  .tip {
    //margin-top: 10px;
    color: #bbb;
    font-size: 12px;
  }
}
.top-box{
  display: flex;
  align-items: center;
  .carouse{
    margin-left: 50px;
    span{
      color: #666;
    }
  }
}


</style>
